<template>
  <view :class="['n--tag', size]" :style="tagStyle">
    {{ text }}
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
  props: {
    text: {
      type: String,
      default: '',
    },
    size: {
      type: String,
      default: '',
    },
    tagStyle: {
      type: String,
      default: '',
    },
  },
}
</script>
<style lang="scss" scoped>
.n--tag {
  display: inline-block;
  padding: 4px 10px;
  background: linear-gradient(to right, #1da1ab, #66c2ff);
  color: white;
  border-radius: 4px;
  margin-right: 8px;
  font-size: 14px;
  margin: 2px;
  &.small {
    padding: 2px 8px;
    font-size: 12px;
  }
}
</style>
